import React, { FC } from 'react'
import { Avatar } from 'antd';
import { animated } from 'react-spring'
import useScale from '@/hooks/useScale';
import { useNavigate } from 'react-router-dom';

interface Props {

}

/**
 * 用户头像
 * @param props 
 * @returns 
 */
const UserAvatar: FC = (props: Props) => {
    const [styles, setStyles] = useScale({ rotate: 360 });
    const navigate = useNavigate();
    const onClick = () => {
        navigate('/user')
    }
    return (
        <div onClick={onClick}>
            <animated.div style={styles} onMouseOver={() => setStyles({ y: 10, scale: 2 })} onMouseLeave={() => setStyles({ y: 0, scale: 1 })}>
                <Avatar src='https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png' size='large'></Avatar>
            </animated.div>
        </div>
    )
}

export default UserAvatar;
